<template>
    <div class="asset-wrapper">
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <DataGrid :auto-load="autoLoad" :pagination="false" :show-search="false" ref="dataGridRef">
                    <template #toolbar-search>
                        <span class="title">资产信息</span>
                    </template>
                    <template #toolbar-operation>
                        <el-button type="primary" size="small" @click="addItem">添加</el-button>
                    </template>
                    <el-table-column label="属性名称">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="onShowItem(row)">
                                {{ row.displayName }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="attributeName" label="标识符" />
                    <el-table-column label="是否必填">
                        <template #default="{ row }">
                            {{ row.required ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="数据类型" prop="typeName">
                        <template #default="{ row }">
                            {{ attributeTypeList?.[row.typeName]?.displayName || 'N/A' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="defaultValue" label="默认值" />
                    <el-table-column label="操作" width="120">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="onSettingItem(row)"> 设置 </el-button>
                            <el-button link type="danger" @click="onRemoveItem(row)"> 删除 </el-button>
                        </template>
                    </el-table-column>
                </DataGrid>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { modelService, type SysMetadataObject } from '@great/services';
import { type AutoLoadConfig, DataGrid, type DataGridInstance } from '@great/components';
import { showPopupBox } from '@great/utils';
import AssetAttributeSelectModal from './AssetAttributeSelectModal.vue';
import AssetAttributeSettingModal from './AssetAttributeSettingModal.vue';
import AttributeFormModal from '@/pages/model/business/components/detail/thingModel/components/AttributeFormModal.vue';

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();

const attributeTypeList = inject<any>('AttributeTypeList');
const loading = ref(true);
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const objectName = computed(() => `${props.detailData!.objectName}Asset`);

const ready = computed(() => !!props.detailData);
const autoLoad = reactive<AutoLoadConfig>({
    debounce: true,
    reloadDeps: [() => props.detailData],
    ready,
    onLoad: async (current, size) => {
        const res = await modelService.attribute.getList({
            current,
            size: -1,
            objectName: objectName.value
        });
        const data = res.data.records
            .filter(item => item.attributeType !== 'SYSTEM')
            .sort((a, b) => Number(b.required) - Number(a.required));
        return { data };
    }
});

function addItem() {
    showPopupBox(AssetAttributeSelectModal, {
        objectName: objectName.value,
        attributeTypeList: attributeTypeList.value,
        callback() {
            dataGridRef.value?.refresh();
        }
    });
}
async function onRemoveItem(row: any) {
    modelService.attribute
        .removeExtends({
            objectName: objectName.value,
            attributeNames: [row.attributeName]
        })
        .then(dataGridRef.value?.refresh);
}

function onSettingItem(row: any) {
    showPopupBox(AssetAttributeSettingModal, {
        objectName: objectName.value,
        detail: row,
        callback() {
            dataGridRef.value?.refresh();
        }
    });
}
function onShowItem(row: any) {
    showPopupBox(AttributeFormModal, {
        readOnly: true,
        modelDetail: props.detailData,
        detail: row,
        attributeTypeList: attributeTypeList.value,
        callback() {
            dataGridRef.value?.refresh();
        }
    });
}

watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.asset-wrapper {
    padding-top: 20px;
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
